<template>
  <div class="signup">
    <div class="signup-input">
      <ul>
        <li class="border-1px">
          <span class="icon-user"></span><input type="number" placeholder="手机号码" v-model.trim="phoneNum">
        </li>
        <li class="border-1px" v-if="!isText">
          <span class="icon-password"></span><input type="password" placeholder="密码" v-model.trim="passWord"><span @click="togglePassword" class="icon-eye-close"></span>          
        </li>
        <li class="border-1px" v-if="isText">
          <span class="icon-password"></span><input type="text" placeholder="密码" v-model.trim="passWord"><span @click="togglePassword" class="icon-eye-open"></span>
        </li>
        <li class="border-1px">
          <span class="icon-sms"></span><input type="number" v-model.trim="smsVer" placeholder="短信验证码">
          <div class="smsver">
            <phone-verification @click='smsSendOut' ref="sms"></phone-verification>           
          </div>
        </li>
        <li class="border-1px">
          <span class="icon-invite"></span><input type="number" placeholder="邀请码（选填）" v-model.trim="invitNum">
        </li>
      </ul>
    </div>
    <div class="signup-reg">
      <p>注册账户表示您同意<span @click="toSignupAgreement">《分秒金融注册协议》</span></p>
      <div class="pillbtn-wrapper" @click="register">
        <pillbtn>
          <p>领取1288元现金红包</p>
        </pillbtn>
      </div>
      <p>已有账号？<span @click="toLogin">请登录</span></p>
    </div>

  </div>
</template>

<script>
  import { Toast, Indicator } from 'mint-ui'
  import pillbtn from 'components/common/pillbtn'
  import phoneVerification from 'components/common/phoneVerification'

  export default {
    data () {
      return {
        phoneNum: null,
        passWord: null,
        smsVer: null,
        invitNum: '',
        inviteCode: '',
        showPassWord: false,
        isText: false,
        from: '' // 活动页面传递的参数，用来注册完跳转
      }
    },
    computed: {
      toggleClass () {
        return this.isText ? 'icon-eye-open' : 'icon-eye-close'
      }
    },
    methods: {
      togglePassword () {
        this.isText = !this.isText
      },
      register () {
        const vm = this
        if (!(/^1[34578]\d{9}$/.test(this.phoneNum))) {
          Toast('请输入正确的手机号码')
          return
        }
        if (this.smsVer.length !== 6) {
          Toast('短信验证码错误')
          return
        }
        this.$http.post('/api/member/regist', 'mobile=' + this.phoneNum + '&smsCode=' + this.smsVer + '&password=' + this.passWord + '&channelCode=2&invitMobile=' + this.invitNum + '&promotionCode=' + this.inviteCode)
        .then((res) => {
          if (res.data.success) {
            Toast({
              message: '恭喜您！注册成功！',
              iconClass: 'icon icon-success',
              duration: 600
            })
            // 注册成功后直接登陆
            vm.$http.post(`/api/member/login?loginName=${vm.phoneNum}&password=${vm.passWord}`)
              .then((res) => {
                if (res.data.success) {
                  vm.$cookie.set('acctKey', res.data.data, {
                    expires: '7D'
                  })
                  console.log(res.data)
                  Indicator.close()
                  console.log('获取数据成功')
                  vm.$router.push('/mine?from=register')
                } else {
                  Indicator.close()
                  Toast(res.data.msg)
                }
              })
              .catch((err) => {
                console.log(err)
              })
          } else {
            Toast(res.data.msg)
            console.log(res.data)
          }
        })
        .catch((err) => {
          Toast(err)
        })
      },
      smsSendOut () {
        if (!(/^1[34578]\d{9}$/.test(this.phoneNum))) {
          this.$refs.sms.state = 'init'
          Toast('请输入正确的手机号码')
          return
        }
        if (!(/^[a-zA-Z0-9]{6,18}$/.test(this.passWord))) {
          this.$refs.sms.state = 'init'
          Toast('请输入6到18位的密码')
          return
        }

        this.$http.post(`/api/member/sendSmsCode?mobile=${this.phoneNum}`)
          .then((res) => {
            this.$refs.sms.state = 'loading' // 开始发送短信
            if (res.data.success) {
              // 发送短信成功
              return
            } else {
              Toast(res.data.msg)
              this.$refs.sms.state = 'finished'
              return
            }
          })
          .catch((err) => {
            this.$refs.sms.state = 'finished'
            Toast(err)
          })
      },
      toLogin () {
        this.$router.push('/login')
      },
      toSignupAgreement () {
        this.$router.push('/signupAgreement')
      }
    },
    created () {
      if (this.$route.query['invitNum'] && this.$route.query['invitNum'] !== '') {
        this.invitNum = this.$route.query['invitNum']
      }
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
      if (this.$route.query['from'] && this.$route.query['from'] !== '') {
        this.from = this.$route.query['from']
      }
      if (this.$route.query['mobile'] && this.$route.query['mobile'] !== '') {
        this.phoneNum = this.$route.query['mobile']
      }
    },
    components: {
      pillbtn,
      Toast,
      phoneVerification
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .signup {
    width: 100%;
    height: 100%;
    background: url('../../assets/land_bg@2x.png');
    background-size: cover;
    .showpassword {
      margin-right: 30px;
      color: $base-fff;
    }
    &-input {
      ul {
        padding: 60px 30px 0 30px;
        li {
          display: flex;
          padding: 16px 0 16px 30px;
          margin-top: 64px;
          font-size: 30px;
          color: $base-999;
          @include border-1px(#ccc);
          &:nth-child(2) {
            span:nth-child(3) {
              padding: 0 30px;
            }
          }
          &:nth-child(1) {
            margin-top: 0;
          }
          input {
            outline: none;
            flex: 1 1 auto;
            margin-left: 24px;
            background-color: transparent;
          }
        }
      }
      .smsver {
        position: absolute;
        bottom: 8px;
        right: 0;
        text-align: center;
        span {
          display: inline-block;
          border-radius: 50px;
          background: #fcc1bb;
          color: $base-fff;
          padding: 20px 30px 15px 30px;
          min-width: 80px;
          font-size: 26px;
          &:nth-child(2) {
            background: $base-fff;
            color: $base-999;
            border: 1px solid lighten(#ff4133, 17);
          }
        }
      }
    }
    &-reg {
      width: 570px;
      margin: 0 auto;
      text-align: center;
      & > p:nth-child(1) {
        margin: 70px 0 30px 0;
        font-size: 26px;
        color: $base-666;
        span {
          color: $base-ff6c00;
          text-decoration: underline;
        }
      }
      & > p:nth-child(3) {
        color: $base-ff6c00;
        font-size: 36px;
        margin-top: 150px;
        span {
          text-decoration: underline;
        }
      }
    }
  }
</style>
